<template>
  <section class="content" id="content">
    <lq-form :form="form" :rules="rules" ref="addEntityFormRef">
      <template #footer>
        <div style="padding-bottom: 10px;" v-if="form.innerAttrs.disabled==false">
          <el-button type="primary" v-if="form.innerAttrs.readonly==false"  @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </lq-form>
  </section>
</template>
<script setup lang="ts">
import LqForm from "@/pages/components/LqForm.vue";

import {
  ref,
  reactive,
  onMounted,
  toValue,
  defineExpose,
  defineEmits,
  getCurrentInstance
} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";


/**
 * --------------全局共享上下文引入--------------------------
 */
const global = getCurrentInstance().appContext.config.globalProperties;



// 表单数据结构
const form = ref({
  innerAttrs: {
    labelPosition: 'right',
    labelWidth: 140,
    disabled: false,
    readonly:false
  },
  model: {
    id:'',
    subject: '',
    level: '',
    time: '',
    summary: '',
    result: ''

  },
  formItems: [
    {type: 'input', label: '事件事故标题: ', prop: 'subject', span: 15, maxlength: 30, placeholder: '请输入事件事故标题'},
    {type: 'select', label: '事故事件等级: ', prop: 'level', span: 15, options: [{label: '较大事故', value: '较大事故'},{label: '一般事故', value: '一般事故'},{label: '重大事故', value: '重大事故'},{label: '特别重大事故', value: '特别重大事故'}], },
    {type: 'date', label: '发生时间: ', prop: 'time', span: 20,valueFormat:"YYYY-MM-DD" },
    {type: 'textarea', label: '事故概述: ', prop: 'summary', rows: 3, span: 20, placeholder: '', },
    {type: 'textarea', label: '事故处理结果: ', prop: 'result', rows: 3, span: 20, placeholder: '', }
  ],
  buttonsAttrs: {
    // align: 'center'
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
  subject: [{ required: true, message: '请输入人事件事故标题', trigger: 'blur'}],
  level: [{ required: true, message: '请输入事故等级', trigger: 'blur'}],
  time: [{ required: true, message: '请选择发生时间', trigger: 'blur'}],
  summary: [{ required: true, message: '请概述事故概况', trigger: 'blur'}],
  result: [{ required: true, message: '请输入处理结果', trigger: 'blur'}],

});


//向上注册刷新事件
const emit = defineEmits<{
  (e: 'flush', value: Object): void
}>()

// 表单验证规则
const addEntityFormRef = ref<FormInstance>();

const handleSubmit = async () => {
  const valid = await addEntityFormRef.value?.validateForm();
  if (valid) {
    global.$api.updateOrSaveEntAccident(Object.assign({}, form.value.model, {}))
        .then(({data}) => {
          if (data.status === 'OK') {
            ElMessage({type: "success", message: "操作成功！", duration: 4000});
            emit('flush', {});
          }
        });
  }

}



const handleReset = () => {
  addEntityFormRef.value?.resetFields();
  form.value.innerAttrs.readonly=false;
  form.value.model.id='';  //必须置空否则变成修改了

}
const handleViewOrEdit = (id:string,readyOnly:boolean) => {
  global.$api.getEntAccidentById({id:id})
      .then(({data}) => {
        if (data.status === 'OK') {
          form.value.model = data.data;
          form.value.innerAttrs.readonly = readyOnly;
        }
      });

}



//暴漏组件操作接口
defineExpose({
  handleViewOrEdit, //编辑
  handleReset  //重置
})

</script>